<template>
    <div class="zs-layout-flex-row zs-layout-justify-between zs-space-bottom">
        <div class="zs-title">
            <span>{{ props.title }}</span>
            <span :class="[props.secondTitle.className]" v-if="props.secondTitle.text" class="second-title">{{ props.secondTitle.text }}</span>
        </div>
        <el-icon class="card-more" @click="goDetail" v-if="props.isMore">
            <MoreFilled />
        </el-icon>
        <div class="card-more" :class="[props.rightTip.className]" v-if="props.rightTip.text">{{ props.rightTip.text }}
        </div>
    </div>
</template>

<script setup>

const props = defineProps({
    title: {
        type: String,
        required: true,
        default: ''
    },
    secondTitle: {
        type: Object,
        required: false,
        default: () => {return { text: '', className: '' }}
    },
    isMore: {
        type: Boolean,
        required: false,
        default: true
    },
    rightTip: {
        type: Object,
        required: false,
        default: () => {return { text: '', className: '' }}
    }
})
const emit = defineEmits(["onMore"]);
const goDetail = () => {
    emit("onMore");
}

</script>

<style scoped lang="scss">
.card-more {
    cursor: pointer;
    color: #C3C7D7;
}
.second-title{
    font-size: 14px;
    color: #999999;
    font-weight: normal;
}
</style>
